<template>
	<view class="swiper">
		<swiper class="swiper" circular  :autoplay="swiperAutoPlayState" :interval="3000" @click="click"
      :duration="500" @change="e => swiperIndex = e.detail.current">
      <swiper-item v-for="(item,index) in bannerList" :key="index" @click="click(index)">
        <VideoImg :url="item.image" :imgVideoStyle="imgVideoStyle" @fullscreenchangeHandler="$emit('hideTabbar')" @playSwiperVideoEmitHandler="swiperAutoPlayState = false" @pauseSwiperVideoEmitHandler="swiperAutoPlayState = true" @endedSwiperVideoEmitHandler="swiperAutoPlayState = true" />
      </swiper-item>
    </swiper>
		<view class="swiperDotBox">
      <view v-for="(item,index) in bannerList" class="swiperDot" :class="swiperIndex === index && 'curDot'"></view>
    </view>
		<!-- <u-swiper @click="click" interval="10000" :list="bannerList" keyName="image" height="160" autoplay indicator
			indicatorMode="line" circular>
		</u-swiper> -->
	</view>
</template>

<script>
	export default {
		name: "homeSwiper",
		data() {
			return {
				bannerList: [], //轮播图
				imgVideoStyle:'index',
				swiperAutoPlayState: true, // swiper 是否自动轮播
				swiperIndex: 0
			};
		},
		mounted() {
			this.getbanner()
		},
		methods: {
			click(index) {
				// console.log(index);
				if (this.bannerList[index].goods_id) {
					uni.navigateTo({
						url: `/subPages/goodDetails/goodDetails?type=${this.bannerList[index].goodstype_id}&id=${this.bannerList[index].goods_id}`
					})
				}
			},
			// 获取轮播图
			async getbanner() {
				let res = await this.$api.getbanner()
				this.bannerList = res.data
			}
		}
	}
</script>

<style lang="scss" scoped>
.swiper-item {
  display: block;
  line-height: 300rpx;
  width: 100%;
  height: 100%;
  text-align: center;
}
.swiper {
	height: 320rpx;
border-radius: 30rpx;
}
.swiperDotBox{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -30rpx;
  z-index: 10099 !important;
  
  .swiperDot{
    margin: 0 6rpx;
    z-index: 10099 !important;
    width: 36rpx;
    height: 10rpx;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10rpx;
  }
}
.curDot{
  background-color: #fff !important;
}
	/* .swiper {
		border-radius: 12rpx;
		overflow: hidden;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	} */
</style>
